<template>
  <div class="mb-4">
    <el-row justify="left" style="margin-top: 20px; margin: 50px">
      <el-button type="primary" plain @click="ass">新增宠物丢失</el-button>
    </el-row>
  </div>
  <el-table :data="tableData" border style="width: 80%; margin: 50px">
    <el-table-column label="宠物照片" width="120">
      <template #default="scope">
        <el-image style="width: 100px; height: 100px" :src="scope.row.avatar" />
      </template>
    </el-table-column>
    <el-table-column prop="loss_name" label="丢失宠物名字" width="120" />
    <el-table-column prop="type" label="种类" width="120" />
    <el-table-column prop="gender" label="性别" width="120" />
    <el-table-column prop="ralate_name" label="联系人" width="120" />
    <el-table-column prop="number" label="联系方式" width="120" />
    <el-table-column prop="found_state" label="找回状态" width="120" />
    <el-table-column label="操作">
      <template #default="scope">
        <el-button :plain="true" type="danger" @click="open4">删除</el-button>
      </template>
    </el-table-column>
  </el-table>
</template>
<script lang="ts" setup>
const tableData = [
  {
    avatar: chai,
    loss_name: '小米',
    type: '狗',
    gender: '母',
    ralate_name: '小明',
    number: '15814191375',
    found_state: '未找到'
  },
  {
    avatar: qiu,
    loss_name: '三毛',
    type: '狗',
    gender: '公',
    ralate_name: '小七',
    number: '15814191375',
    found_state: '未找到'
  },
  {
    avatar: liulang1,
    loss_name: '琪琪',
    type: '狗',
    gender: '母',
    ralate_name: '小层',
    number: '15814191375',
    found_state: '未找到'
  }
]
import { ref } from 'vue'
import { ElMessage } from 'element-plus'
const open4 = () => {
  ElMessage.error('删除成功')
}
import chai from '../../assets/chai.jpg'
import qiu from '../../assets/qiu.jpg'
import liulang1 from '../../assets/liulang1.jpg'
import router from '@/router'
const ass = () => {
  router.push({ path: '/pet9' })
}
</script>
